<template>
  <div class="search">
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" @change="filterPrice" />
    </van-dropdown-menu>
    <div class="search_data">
      <Pagination :goodsList="goodsList"></Pagination>
    </div>
  </div>
</template>
<script>
import { getSearch } from '@/api/search'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      value1: 0,
      value2: 'a',
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '价格升序', value: 'b' },
        { text: '价格降序', value: 'c' }
      ],
      strVal: '',
      goodsList: []
    }
  },
  mounted() {
    this.strVal = this.$route.params.proid
    getSearch({
      count: 1,
      limitNum: 10,
      keyword: this.strVal
    }).then((res) => {
      this.goodsList = res.data.data
    })
  },
  methods: {
    filterPrice(val) {
      if (val === 'b') {
        this.goodsList.sort((a, b) => {
          return a.originprice - b.originprice
        })
      } else if (val === 'c') {
        this.goodsList.sort((a, b) => {
          return b.originprice - a.originprice
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.search{
  padding: 0px 10px;
  .van-dropdown-menu{
    margin-top: 54px;
  }
}
.search_data{
  margin-bottom: 50px;
}
</style>